<template>
  <page-meta :root-font-size="fontsize" style="display: block">
    <div class="callrecord">
      <xlNavBar
        :isShare="isShare"
        title="拨打记录"
        :isMark="true"
        bgc="ff9d49"
      ></xlNavBar>
      <div class="tabs">
        <div
          :class="['item', activeIndex == index ? 'active' : '']"
          @click="clickTabs(index)"
          v-for="(item, index) in tabs"
          :key="item.id"
        >
          {{ item.name }}
        </div>
      </div>
      <div class="list" v-if="list.length > 0">
        <div v-for="item in list" :key="item.id" @click="toDetail(item)">
          <div v-if="activeIndex != 2">
            <div
              class="item_job"
              :class="activeIndex == 1 ? 'item_resume' : ''"
            >
              <image
                class="istop"
                v-if="activeIndex == 0 && item.is_top"
                src="@/static/images/common/redzhiding.png"
                mode="scaleToFill"
              />
              <image
                class="istop"
                v-if="activeIndex == 1 && item.is_urgent"
                src="@/static/images/common/redjiaji.png"
                mode="scaleToFill"
              />
              <div class="top">
                <div class="tag">{{ getStatusText(item.status) }}</div>
                <div class="title">
                  {{ $getTitleText(item.job_intention || item.positions) }}
                </div>
              </div>
              <div class="content">
                <div class="text">{{ item.content || item.description }}</div>
                <div class="images" v-if="item.picture_url || item.photo_urls">
                  <image
                    v-for="(img, idx) in getImage(
                      item.picture_url || item.photo_urls
                    )"
                    :key="idx"
                    :src="img"
                    mode="aspectFill"
                    fit="cover"
                    class="image"
                  ></image>
                </div>
              </div>
              <div class="line"></div>
              <div class="bottom">
                <div class="contact_time">联系时间：{{ item.buy_time }}</div>
                <div
                  class="btn"
                  :class="activeIndex == 1 ? 'btn_resume' : ''"
                  @click.stop="contactEvent(item)"
                >
                  <i class="iconfont cydianhua"></i>
                  <span>联系{{ activeIndex == 1 ? "对方" : "老板" }}</span>
                </div>
              </div>
            </div>
          </div>

          <view
            class="item_store"
            @click="toStoreDetail(item.purpose_info)"
            v-else
          >
            <template v-if="item.purpose_info">
              <image
                class="c-c-top"
                v-if="item.purpose_info.is_top"
                src="@/static/images/common/redzhiding.png"
                mode="scaleToFill"
              />
              <view class="c-c-title">
                <span class="t-badge">
                  {{ getStatusText(item.purpose_info.status, 3) }}
                </span>
                {{ item.purpose_info.store_highlight }}
              </view>
              <view class="c-c-info">
                <view class="i-card">
                  <view class="name">
                    {{ item.purpose_info.monthly_rent }}
                    <span class="unit">元/月</span>
                  </view>
                  <view class="text">
                    {{
                      (
                        item.purpose_info.monthly_rent /
                        item.purpose_info.store_area /
                        30
                      ).toFixed(1)
                    }}元/m²/天
                  </view>
                </view>
                <view class="i-card">
                  <view class="name">
                    {{ item.purpose_info.store_area }}
                    <span class="unit">m²</span>
                  </view>
                  <view class="text">面积</view>
                </view>
                <view class="i-card">
                  <view class="name">
                    {{
                      item.purpose_info.is_transfer_fee !== 1
                        ? "无转让费"
                        : item.purpose_info.is_show_transfer_fee === 1
                        ? (item.purpose_info.transfer_fee/10000).toFixed(2) + "万元"
                        : "面议"
                    }}
                  </view>
                  <view class="text">转让费</view>
                </view>
              </view>
              <view
                class="c-c-image"
                v-if="getImageList(item.purpose_info['store_image']).length > 0"
              >
                <image
                  :style="{ width: '80px', height: '80px' }"
                  v-for="img in getImageList(item.purpose_info['store_image'])"
                  @click.self="
                    preview(
                      index,
                      getImageList(item.purpose_info['store_image'])
                    )
                  "
                  :key="img"
                  :src="img"
                  mode="aspectFill"
                />
              </view>
              <view class="c-c-address">
                <view class="a-info">
                  联系时间：{{ item.show_time || "刚刚" }}
                </view>
                <view
                  class="a-btn"
                  @click.stop="handleContact(item.purpose_info)"
                  :class="[
                    item.purpose_info.status == 3 ||
                    item.purpose_info.status == 2
                      ? 'btn_gray_resume'
                      : ''
                  ]"
                >
                  <i class="iconfont cydianhua"></i>
                  免费联系
                </view>
              </view>
            </template>
          </view>
        </div>
      </div>
      <div class="cr-null" v-else>
        <image class="icon" src="@/pages3/static/none.png" mode="scaleToFill" />
        <div class="info">抱歉，近3个月暂无拨打记录～</div>
      </div>
    </div>

    <contactPopup
      :title="contactTitle"
      :content="contentText"
      :btnTetx="contactBtnText"
      @submit="makePhoneCall"
      @close="showContactPopup = false"
      :show="showContactPopup"
    ></contactPopup>

    <TipPopup
      :title="tipOption.title"
      :content="tipOption.content"
      :submitText="tipOption.submitText"
      @submitTip="tipOption.submit()"
      @closeTip="closeTip"
      v-if="tipPopup"
    ></TipPopup>
    <ContactBoss
      @submitCall="submitCall"
      @submitIntention="submitIntention"
      @close="closeContactBoss"
      v-if="contactBossPopup"
    ></ContactBoss>
  </page-meta>
</template>

<script>
import contactPopup from "./compontents/contactPopup.vue";
import TipPopup from "./components/tipPopup.vue";
import ContactBoss from "./components/contactBoss.vue";

export default {
  name: "callrecord",
  components: { contactPopup, TipPopup, ContactBoss },
  data() {
    return {
      isShare: 0,
      fontsize: "",
      activeIndex: 0,
      tabs: [
        {
          id: 1,
          name: "招工信息"
        },
        {
          id: 2,
          name: "求职信息"
        },
        {
          id: 3,
          name: "转让信息"
        }
      ],
      list: [],
      showContactPopup: false,
      contactTitle: "",
      contactBtnText: "",
      contentText: "",
      info: null,
      tipPopup: false,
      contactBossPopup: false,
      tipOption: {
        title: "",
        content: "",
        submitText: "",
        submit: () => {}
      },
      showContactPopup: false,
      storeDetail: null,
      userIntegralInfo: null
    };
  },
  created() {
    this.getList(1);
  },
  methods: {
    getStatusText(status) {
      let text = "招聘";
      if (this.activeIndex == 1) {
        text = "求职";
      }
      if (this.activeIndex == 2) {
        text = "转让";
      }
      let str = "";
      // 状态 1、生效 2、删除 3、暂停，4待审核，5 审核拒绝
      switch (status) {
        case 1:
          str = `${text}中`;
          break;
        case 2:
          str = `停止${text}`;
          break; // 删除操作不会给用户提示或警告
        case 3:
          str = `停止${text}`;
          break;
        case 4: // 待审核 （未绑定电话） （未发送短信） （未发送电子邮件
          str = `停止${text}`;
          break;
        case 5:
          str = `停止${text}`;
          break;
      }
      return str;
    },
    toDetail(item) {
      if (
        item.status == 2 ||
        item.status == 3 ||
        item.status == 4 ||
        item.status == 5
      ) {
        return this.$layer.message("当前信息已关闭");
      }
      if (this.activeIndex == 1) {
        this.$togo("/pages2/resumeDetail", {
          id: item.id
        });
      } else {
        this.$togo("/pages2/jobDetail", {
          id: item.id
        });
      }
    },
    toStoreDetail(item) {
      this.$togo("/shopPackage/storeDetail?id=" + item.id);
    },
    getImage(picture) {
      return picture.split(",");
    },
    preview(index, list) {
      uni.previewImage({
        current: index,
        urls: list
      });
    },
    getImageList(str) {
      if (!str) {
        return [];
      }
      if (str.indexOf(",") > -1) {
        return str.split(",");
      } else {
        return [str];
      }
    },
    async clickTabs(index) {
      this.activeIndex = index;
      if (index != 2) {
        this.getList(index + 1);
      } else {
        const { code, contact_history } = await this.$http.requestSync(
          "/storefronts/user_contact_history",
          {},
          "POST"
        );

        if (code == 200) {
          this.list = [];
          for (let i = 0; i < contact_history.length; i++) {
            let item = contact_history[i];
            if (!item.purpose_info) {
              continue;
            }
            this.list.push(item);
          }
        } else {
          this.list = [];
        }
      }
    },
    async getList(type) {
      let res = await this.$http.requestSync("/bills/buy_phone/list/" + type);
      if (res.code == 200) {
        if (type == 1) {
          //招工列表
          this.list = res.jobs || [];
        } else {
          //求职列表
          this.list = res.resumes || [];
        }
      } else {
        this.list = [];
      }
    },
    async contactEvent(item) {
      this.info = item;
      if (
        item.status == 2 ||
        item.status == 3 ||
        item.status == 4 ||
        item.status == 5
      ) {
        return this.$layer.message("当前信息已关闭");
      }
      let text = this.activeIndex == 1 ? "对方" : "老板";
      let type = this.activeIndex == 1 ? 6 : 5;
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          let params = { purpose_id: item.id, type };
          let res = await this.$http.requestSync("/bills/get", params);
          if (res.code == 200) {
            if (
              (res.data.phone &&
                this.$getStoraged("systemInfo").platform == "android") ||
              (res.data.phone &&
                this.$getStoraged("systemInfo").platform == "ios") ||
              (res.data.phone &&
                this.$getStoraged("systemInfo").platform == "devtools")
            ) {
              //手机打开
              if (res.data.phone) {
                uni.makePhoneCall({
                  phoneNumber: res.data["phone"].toString() //电话号码
                });
                return false;
              }
            } else {
              //pc端打开
              if (res.data.phone) {
                uni.showModal({
                  title: "查看手机号",
                  content: res.data["phone"].toString(),
                  success: function (res) {
                    if (res.confirm) {
                      console.log("用户点击确定");
                    } else if (res.cancel) {
                      console.log("用户点击取消");
                    }
                  }
                });
                return false;
              }
            }

            // 如果用户积分够的话
            if (res.data.is_ok) {
              this.contentText = `您当前剩余${res.data["user_integral"]}积分可用，是否立即与${text}联系？`;
              this.contactTitle = `与${text}联系需要消耗${res.data["integral"]}积分`;
              this.contactBtnText = `联系${text}`;
              this.showContactPopup = true;
            } else {
              this.contactTitle = `温馨提示`;
              this.contactBtnText = `去获取积分`;
              this.contentText = `当前您的积分不足，是否前往获取积分？`;
              this.showContactPopup = true;
            }
            this.contactInfo = res.data;
          }
        });
      });
    },
    async makePhoneCall() {
      let that = this;
      let type = this.activeIndex == 1 ? 6 : 5;
      this.$throttle(async () => {
        if (this.contactInfo) {
          if (this.contactInfo.is_ok) {
            let params = {
              purpose_id: this.info.id,
              type
            };
            let res2 = await this.$http.requestSync("/bills/buy_phone", params);
            if (res2.code == 200) {
							if (
								this.$getStoraged("systemInfo").platform == "android" ||
								this.$getStoraged("systemInfo").platform == "ios" ||
								this.$getStoraged("systemInfo").platform == "devtools"
							) {
								uni.makePhoneCall({
									phoneNumber: res2.data["phone"].toString(), //电话号码
									success: function (e) {
										that.showContactPopup = false;
									},
									fail: function (e) {
										that.showContactPopup = false;
									}
								});
							} else {
								uni.showModal({
									title: "查看手机号",
									content: res2.data["phone"].toString(), //电话号码
									success: () => {
										this.showContactPopup = false;
									},
								});
							}
            } else {
              that.showContactPopup = false;
              that.$layer.message(res2.message);
            }
          } else {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        } else {
          this.$layer.message("信息有误,请稍后重试");
        }
      });
    },
    async handleContact(store) {
      this.$throttle(async () => {
        this.$checkLogin(async () => {
          this.storeDetail = store;
          let params = { purpose_id: store.id };
          let res = await this.$http.requestSync(
            "/storefronts/is_contact",
            params,
            "POST"
          );
          if (res.is_contact || res.is_top) {
            this.contactRequest(false, true);
            return;
          }
          if (!res.is_self_pay) {
            this.contactRequest(false);
          } else {
            this.userIntegralInfo = res;
            this.contactBossPopup = true;
          }
        });
      });
    },
    closeTip() {
      this.tipPopup = false;
    },
    async submitCall() {
      this.contactBossPopup = false;
      this.tipPopup = true;
      if (this.userIntegralInfo.is_ok) {
        this.tipOption = {
          title: `与老板联系需要消耗${this.userIntegralInfo.integral}积分`,
          submitText: "联系老板",
          content: `您当前剩余${this.userIntegralInfo.user_integral}积分可用，是否立即与老板联系？`,
          submit: async () => {
            this.contactRequest(true);
          }
        };
      } else {
        this.tipOption = {
          title: "温馨提示",
          submitText: "去获取积分",
          content: "当前您的积分不足，是否前往获取积分？",
          submit: () => {
            if (this.$isIos() == "IOS") {
              this.$togo("/pages3/myIntegral");
            } else {
              this.$togo("/pages3/integralRechargePage");
            }
          }
        };
      }
    },
    async contactRequest(selfPay, top) {
      let params = {
        purpose_id: this.storeDetail.id,
        is_self_pay: selfPay,
        is_top: top || false
      };
      let res = await this.$http.requestSync(
        "/storefronts/contact",
        params,
        "POST"
      );
      if (res.code === 200) {
				if (
					this.$getStoraged("systemInfo").platform == "android" ||
					this.$getStoraged("systemInfo").platform == "ios" ||
					this.$getStoraged("systemInfo").platform == "devtools"
				) {
					uni.makePhoneCall({
						phoneNumber: res.phone,
					});
				} else {
					uni.showModal({
						title: "查看手机号",
						content: res.phone
					});
				}
      } else {
        uni.showToast({
					title: res.message,
					icon: "none",
					duration: 2000,
				});
      }
      this.contactBossPopup = false;
      this.tipPopup = false;
    },
    async submitIntention() {
      let params = {
        purpose_id: this.storeDetail.id
      };
      let res = await this.$http.requestSync(
        "/storefronts/intention",
        params,
        "POST"
      );
      if (res.code === 200) {
        this.$layer.message("提交成功");
      } else {
        this.$layer.message(res.message);
      }
      this.contactBossPopup = false;
    },
    closeContactBoss() {
      this.contactBossPopup = false;
    }
  },
  onLoad(options) {
    if (options.params) {
      let params = JSON.parse(decodeURIComponent(options.params));
      if (params.shareUserId) {
        this.$setStoraged("shareUserId", params.shareUserId);
        this.isShare = 1;
      }
    }
    let designWidth = 37.5; //因设计图的宽度
    let that = this;
    //窗体改变大小触发事件
    uni.onWindowResize((res) => {
      console.log("变化后的窗口宽度=", res.size.windowWidth);
      //100*屏幕宽度/设计稿宽度
      that.fontsize =
        Math.floor((1.5 * res.size.windowWidth) / designWidth) + "px";
      console.log("字体大小：", that.fontsize);
    });

    //打开获取屏幕大小
    uni.getSystemInfo({
      success(res) {
        console.log("设备信息：", res);
        that.fontsize =
          Math.floor((1.5 * res.screenWidth) / designWidth) + "px";
        console.log("字体大小：", that.fontsize);
      }
    });
  }
};
</script>

<style lang="scss" scoped>
.callrecord {
  background: #fff;
  .tabs {
    width: 300px;
    height: 36px;
    background: #f6f6f6;
    border-radius: 18px;
    margin: 10px auto;
    display: flex;
    justify-content: space-between;
    .item {
      line-height: 36px;
      font-size: 14px;
      font-weight: 400;
      color: #666666;
      padding: 0 17px;
      border-radius: 18px 18px 18px 18px;
    }
    .active {
      background: #fff;
      font-size: 14px;
      font-weight: 600;
      color: #ff8822;
      margin: 3px;
      line-height: 33px;
    }
  }
  .list {
    background: #fff;
    box-sizing: border-box;
    padding: 10px;
    .item_job {
      position: relative;
      min-height: 150px;
      background: #fffcf8;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
      border-radius: 10px;
      opacity: 1;
      border: 1px solid #ffd5d5;
      box-sizing: border-box;
      padding: 18px 10px 15px 10px;
      margin-bottom: 10px;
      &.item_resume {
        border: 1px solid #ffebdb;
        background: #fdfafa;
      }
      .top {
        width: calc(100%-39px);
        display: flex;
        align-items: center;
        .tag {
          height: 17px;
          background: rgba(62, 166, 255, 0);
          border-radius: 3px 3px 3px 3px;
          opacity: 1;
          border: 1px solid #ff8822;
          font-size: 12px;
          font-weight: 400;
          color: #ff8822;
          padding: 2px 5px;
          margin-right: 4px;
          flex-shrink: 0;
        }
        .title {
          font-size: 16px;
          font-weight: 600;
          color: #333333;
          @include ell();
        }
      }
      .content {
        .text {
          font-size: 14px;
          font-family: PingFang SC-Regular, PingFang SC;
          font-weight: 400;
          color: #555555;
          margin: 13px auto 10px;
          line-height: 18px;
          @include ells(2);
        }
        .images {
          image {
            width: 80px;
            height: 80px;
            margin-right: 10px;
          }
        }
      }
      .line {
        height: 1px;
        background: #e4e4e4;
        margin: 0 auto;
      }
      .bottom {
        display: flex;
        align-items: center;
        justify-content: space-between;
        margin: 10px 0 0 0;
        .contact_time {
          font-size: 11px;
          color: #666666;
        }
        .btn {
          width: 89px;
          height: 31px;
          background: #ff8822;
          border-radius: 16px 16px 16px 16px;
          color: #fff;
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 600;
          &.btn_resume {
            background: #f76a6a;
          }
          .iconfont {
            margin: 0 5px 0 12px;
          }
        }
      }
      .istop {
        position: absolute;
        right: 0;
        top: 0;
        width: 39px;
        height: 36px;
      }
    }

    .item_store {
      position: relative;
      width: 100%;
      box-sizing: border-box;
      padding: 20px 10px;
      margin-bottom: 10px;
      display: flex;
      flex-direction: column;
      border: 1px solid #dff0ff;
      border-radius: 10px;
      box-shadow: 0px 3px 10px 0px rgba(0, 0, 0, 0.0275);
      background: #f9fcff;
      .c-c-title {
        font-size: 13px;
        color: #555555;
        line-height: 24px;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-line-clamp: 2;
        line-clamp: 2;
        -webkit-box-orient: vertical;
        .t-badge {
          padding: 4px 5px;
          margin-right: 4px;
          font-size: 10px;
          color: #2c9cfd;
          border-radius: 3px 3px 3px 3px;
          background: rgba(62, 166, 255, 0);
          border: 1px solid #2c9cfd;
        }
      }
      .c-c-info {
        display: flex;
        justify-content: space-around;
        margin: 15px 0;
        .i-card {
          display: flex;
          flex-direction: column;
          align-items: center;
          .name {
            font-weight: 600;
            color: #2c9cfd;
            font-size: 18px;
            .unit {
              font-size: 12px;
            }
          }
          .text {
            margin-top: 5px;
            font-size: 10px;
            color: #999999;
          }
        }
      }
      .c-c-address {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding-top: 10px;
        .a-info {
          display: flex;
          font-size: 11px;
          padding-left: 5px;
          color: #666666;
        }
        .a-btn {
          width: 89px;
          height: 31px;
          background: #f76a6a;
          border-radius: 16px 16px 16px 16px;
          color: #fff;
          display: flex;
          align-items: center;
          font-size: 12px;
          font-weight: 600;

          .iconfont {
            margin: 0 5px 0 12px;
          }
        }
      }
      .c-c-top {
        position: absolute;
        top: -2px;
        right: -2px;
        width: 36px;
        height: 36px;
      }
    }
  }
  .cr-null {
    display: flex;
    flex-direction: column;
    align-items: center;
    .icon {
      margin-top: 100px;
      width: 180px;
      height: 180px;
    }
    .info {
      margin-top: 10px;
      color: #999999;
    }
  }
  .tag_gray_job {
    background: rgba(62, 166, 255, 0) !important;
    border: 1px solid #bfbfbf !important;
    color: #bfbfbf !important;
  }
  .tag_gray_resume {
    background: rgba(62, 166, 255, 0) !important;
    border: 1px solid #bfbfbf !important;
    color: #bfbfbf !important;
  }
  .btn_gray_job {
    background: #ffb678 !important;
    color: #fffefc !important;
  }
  .btn_gray_resume {
    background: #fab2b2 !important;
    color: #fffefc !important;
  }
}
</style>
